<!--
 * @Author: panda
 * @Date: 2022-05-18 09:37
 * @Description: 页面底部组件
-->
<template>
  <div id="footer_container">
    <!-- 左侧 -->
    <div id="left" class="clearfix">
      <dl class="footer_dl">
        <dt class="footer_dt">
          <el-link type="default" :underline="false">无米青年</el-link>
        </dt>
        <dd class="footer_dd">
          <el-link type="default" :underline="false">关于我们</el-link>
        </dd>
        <dd class="footer_dd">
          <el-link type="default" :underline="false">联系我们</el-link>
        </dd>
        <dd class="footer_dd">
          <el-link type="default" :underline="false">加入我们</el-link>
        </dd>
      </dl>
      <dl class="footer_dl">
        <dt class="footer_dt">
          <el-link type="default" :underline="false">青年中心</el-link>
        </dt>
        <dd class="footer_dd">
          <el-link type="default" :underline="false">社区中心</el-link>
        </dd>
        <dd class="footer_dd">
          <el-link type="default" :underline="false">帮助中心</el-link>
        </dd>
        <dd class="footer_dd">
          <el-link type="default" :underline="false">活动中心</el-link>
        </dd>
      </dl>
      <dl class="footer_dl">
        <dt class="footer_dt">
          <el-link type="default" :underline="false">官方发布</el-link>
        </dt>
        <dd class="footer_dd">
          <el-link type="default" :underline="false">官方微博</el-link>
        </dd>
        <dd class="footer_dd">
          <el-link type="default" :underline="false">官方微信</el-link>
        </dd>
        <dd class="footer_dd">
          <el-link type="default" :underline="false">官方网店</el-link>
        </dd>
      </dl>
      <dl class="footer_dl">
        <dt class="footer_dt">
          <el-link type="default" :underline="false">信息汇总</el-link>
        </dt>
        <dd class="footer_dd">
          <el-link type="default" :underline="false">名人堂</el-link>
        </dd>
        <dd class="footer_dd">
          <el-link type="default" :underline="false">友情链接</el-link>
        </dd>
        <dd class="footer_dd">
          <el-link type="default" :underline="false">广告合作</el-link>
        </dd>
      </dl>
    </div>
    <!-- 右侧 -->
    <div id="right">
      <div id="container">
        <!-- 弹出框UI -->
        <el-popover placement="top" width="120px" style="padding: 5px">
          <!-- 触发弹框元素 -->
          <template #reference>
            <div class="imgDivs">
              <el-avatar
                :src="require(`../../assets/download.png`)"
                style="width: 100%; height: 100%"
              />
              <p>下载APP</p>
            </div>
          </template>
          <!-- 弹框内容 -->
          <el-image
            style="width: 120px; height: 110px"
            :src="require(`../../assets/wxqc.jpg`)"
          />
        </el-popover>
        <el-popover placement="top" width="120px" style="padding: 5px">
          <template #reference>
            <div class="imgDivs">
              <el-avatar
                :src="require(`../../assets/wb.png`)"
                style="width: 100%; height: 100%"
              />
              <p>官方微博</p>
            </div>
          </template>
          <el-image
            style="width: 120px; height: 110px"
            :src="require(`../../assets/wxqc.jpg`)"
          />
        </el-popover>
        <el-popover placement="top" width="120px" style="padding: 5px">
          <template #reference>
            <div class="imgDivs">
              <el-avatar
                :src="require(`../../assets/wx.png`)"
                style="width: 100%; height: 100%"
              />
              <p>官方微信</p>
            </div>
          </template>
          <el-image
            style="width: 120px; height: 110px"
            :src="require(`../../assets/wxqc.jpg`)"
          />
        </el-popover>
      </div>
    </div>
    <!-- 底部 -->
    <div id="bottom">
      <p>
        公司名称: 湛江无米青年网络科技有限公司<br />
        <el-link
          type="info"
          :underline="false"
          href="https://www.12377.cn/"
          target="blank"
        >网上有害信息举报专区丨中央网信办（国家网信办）违法和不良信息举报中心
        </el-link>
        <br />
        <img :src="require(`../../assets/icon-police.png`)" alt="photo" />
        <el-link type="info" :underline="false" href="#">互联网ICP备案: 粤ICP备19158852号-1
        </el-link>
      </p>
    </div>
  </div>
</template>

<script>
export default {
  name: 'FooterBar'
}
</script>

<style>
/* 覆盖默认样式 */
.el-popper {
  min-width: 100px !important;
}
</style>

<style scoped>
/* 作用域内组件样式 */

#footer_container {
  height: 280px;
  position: relative;
  box-sizing: border-box;
}

#left {
  position: relative;
  left: 0;
  height: 70%;
  width: 60%;
  background-color: #ececec;
  /* border: 1px solid black; */
}

#right {
  position: absolute;
  right: 0px;
  top: 0px;
  width: 40%;
  height: 70%;
  background-color: #ececec;
}

#bottom {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 30%;
  /* border-top: 1px solid gray; */
  background-color: #ececec;
}

/* 左侧自定义列表样式 */
.footer_dl {
  float: left;
  margin-left: 120px;
  margin-top: 50px;
}

.footer_dl:first-child {
  margin-left: 150px;
}

.footer_dd {
  margin-top: 10px;
  padding-left: 10px;
}

.footer_dd a {
  font-size: 14px;
}

/* 右侧容器样式汇总 */
#container {
  /* 三个二维码弹框居中样式 */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  background-color: #ececec;
}

#container .imgDivs {
  display: inline-block;
  margin: 0 40px;
  width: 60px;
  height: 60px;
  font-size: 14px;
  text-align: center;
}

/* 底部样式 */
#bottom p {
  color: #909399;
  font-size: 14px;
  text-align: center;
}
</style>
